<template>
	<view class="order-item" v-for="(order, index) in props.orders" :key="index" style="margin-bottom: 30rpx">
		<list-cell :hover="false">
			<view class="w-100 d-flex align-items-center">
				<view class="flex-fill d-flex flex-column">
					<view v-show="state.role == ROLE_USER">
						<view class="font-size-lg d-flex text-color-base" style="margin-bottom: 20rpx; justify-content: space-between">
							<view class="title">{{ order.store.name }}</view>
							<view class="nav">
								<image src="/static/images/order/mobile.png" style="width: 60rpx; height: 60rpx; margin-right: 10px" @click.stop="call(order.store.phone)"></image>
								<image
									src="/static/images/order/navigation.png"
									style="width: 60rpx; height: 60rpx"
									@click.stop="navigate(order.store.longitude, order.store.latitude)"
								></image>
							</view>
						</view>
					</view>

					<view class="font-size-sm text-color-assist">订单编号：{{ order.inner_trade_no }}</view>
				</view>
				<view class="font-size-lg text-color-primary order-status">
					{{ getOrderStatus(order.status) }}
				</view>
			</view>
		</list-cell>
		<list-cell :hover="false">
			<view class="w-100 d-flex align-items-center">
				<view class="d-flex flex-column w-60">
					<view class="w-100 d-flex align-items-center overflow-hidden">
						<view class="font-size-sm text-color-assis">收货地址:{{ order.location }}</view>
					</view>
				</view>
				<view class="d-flex justify-content-end align-items-center w-40" v-if="state.role == ROLE_MER">
					<image src="/static/images/order/mobile.png" style="width: 60rpx; height: 60rpx; margin-right: 30rpx" @click.stop="call(order.phone)"></image>
					<image src="/static/images/order/navigation.png" style="width: 60rpx; height: 60rpx" @click.stop="navigate(order.longitude, order.latitude)"></image>
				</view>
			</view>
		</list-cell>

		<list-cell :hover="false" last>
			<view class="w-100 d-flex flex-column">
				<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx">
					<uni-collapse>
						<uni-collapse-item :title="orderGoodsName(order.goods_info)">
							<view class="content">
								<text class="text">
									{{ orderGoodsName(order.goods_info) }}
								</text>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx">
					<view class="font-size-sm text-color-assis">备注:{{ order.des }}</view>
				</view>
				<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx">
					<view class="font-size-sm text-color-assist">
						{{ order.creat_at }}
					</view>
					<view class="d-flex font-size-sm text-color-base align-items-center">
						<view style="margin-right: 10rpx">共{{ order.total }}件商品，实付</view>
						<view class="font-size-lg">￥{{ (order.amount / 100).toFixed(2) }}</view>
					</view>
				</view>
				<view class="d-flex align-items-center justify-content-end" v-if="state.role == ROLE_MER">
					<view style="margin-right: 10rpx">
						<button type="primary" size="mini" v-show="order.status == ORDER_SUCCESS" @click="updateOrder(order, 8)">开始送货</button>
						<button type="primary" size="mini" v-show="order.status == ORDER_DELIVERY" @click="updateOrder(order, 5)">送货完成</button>
					</view>
				</view>
				<view class="d-flex align-items-center justify-content-end" v-if="state.role == ROLE_USER">
					<view style="margin-right: 10rpx">
						<button type="primary" size="mini" v-show="order.status == ORDER_FINISHED || order.status == ORDER_DELIVERY" @click="updateOrder(order, 6)">
							确认收货
						</button>
					</view>
				</view>
			</view>
		</list-cell>
	</view>
</template>

<script setup lang="ts">
import listCell from '../components/list-cell/list-cell';
import { state as globalState } from '@/store/global';
import { GoodsInfo, Order, getOrderStatus } from '../../vendor/order_food/order';
import { state, ROLE_MER, ROLE_USER } from '../../store/user';
import { ORDER_DELIVERY, ORDER_SUCCESS, ORDER_FINISHED } from '../../store/shop';
import getOrders from '../../vendor/order_food/order';
import { call, navigate } from '@/common/util';

const { updateStatus } = getOrders();
const props = defineProps({
	orders: {
		type: Array<Order>,
		required: true
	}
});

const orderGoodsName = (goods: Array<GoodsInfo>) => {
	let arr = [];
	goods.forEach((good) => arr.push(good.title + '*' + good.amount));
	return arr.join('，');
};

const updateOrder = (item: Order, status: number) => {
	if (status == 6) {
		// uni.showLoading();
		// 确认收货 调用微信发货接口
		//  #ifdef  MP-WEIXIN
		if (wx.openBusinessView) {
			globalState.conmfirmOrder =   item 
			// globalState.conmfirmOrder =.status = item.status;
			// globalState.conmfirmOrder.inner_trade_no = item.inner_trade_no;
			console.log(globalState.conmfirmOrder);

			wx.openBusinessView({
				businessType: 'weappOrderConfirm',
				extraData: {
					transaction_id: item.trade_no,
					merchant_id: item.mer_id,
					merchant_trade_no: item.inner_trade_no
				},
				success(res) {
				  //dosomething
				  console.log(res)
				},
				fail(res) {
					console.log(res)
				  //dosomething
				},
				complete() {
					console.log("completed")
				  //dosomething
				}
			});
		} else {
			//引导用户升级微信版本
			uni.showToast({
				title: '请升级微信版本',
				duration: 3000,
				icon: 'none'
			});
		}
		// uni.hideLoading();
		// #endif
	} else {
		// 其他状态修改
		updateStatus(item.inner_trade_no, status, () => {
			item.status = status;
		});
	}
};
</script>

<style lang="scss" scoped>
// @import url('/styles/order_food.scss');
@import '@/styles/order_food.scss';
.nav {
	display: inline-block;
	position: relative;
	margin-left: 10px;
}
.title {
	height: 35px;
	line-height: 35px;
}
.order-status {
	margin-top: 15px;
}
</style>